<template>
  <a-layout class="master-layout">
    <a-layout-sider
      :trigger="null"
      collapsible
      v-model="collapsed"
      width="300"
      :collapsedWidth="0"
    >
      <div class="logo">原理示教</div>
      <a-menu
        :default-selected-keys="['1']"
        :default-open-keys="['sub1']"
        mode="inline"
        theme="dark"
        :inline-collapsed="collapsed"
        @select="onMenuSelect"
      >
        <a-menu-item key="1">
          <a-icon type="pie-chart" />
          <span>I型装置</span>
        </a-menu-item>
        <a-menu-item key="2">
          <a-icon type="desktop" />
          <span>II型装置</span>
        </a-menu-item>
        <a-menu-item key="3">
          <a-icon type="inbox" />
          <span>III型装置</span>
        </a-menu-item>
        <a-menu-item key="4">
          <a-icon type="inbox" />
          <span>IV型装置</span>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header>
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
        <div class="backlogItpm" style="font-size: 30px">
          关键声隐身装备教学与装备维护综合实验平台
        </div>
        <div class="user">
          <a-dropdown>
            <span class="user-center-wrapper ant-dropdown-link">
              <a-icon class="user-center-avatar" type="user" />
            </span>
            <a-menu slot="overlay" @click="handleMenuClick">
              <a-menu-item>
                <a>
                  <div class="user-center-wrapper-item">
                    <a-icon type="logout" />&nbsp;登出
                  </div>
                </a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </div>
      </a-layout-header>
      <a-layout-content>
        <div class="PrincipleTeachContainer">
          <div class="PrincipleTeachLeft">
            <!-- <div
              v-for="item in menuList"
              :key="item.id"
              class="PrincipleTeachLeftBox"
              :class="{ leftBgStyle: leftActive == item.id }"
              @click="leftClick(item)"
            >
              {{ item.name }}
            </div> -->
            <div
              class="PrincipleTeachLeftBox"
              :class="{ leftBgStyle: leftActive == 1 }"
              @click="leftClick(1)"
            >
              装置结构组成示教
            </div>
            <div
              class="PrincipleTeachLeftBox"
              :class="{ leftBgStyle: leftActive == 2 }"
              @click="leftClick(2)"
            >
              智能控制过程示教
            </div>
            <div
              class="PrincipleTeachLeftBox"
              :class="{ leftBgStyle: leftActive == 3 }"
              @click="leftClick(3)"
            >
              振动激励源特性示教
            </div>
            <div
              class="PrincipleTeachLeftBox"
              :class="{ leftBgStyle: leftActive == 4 }"
              @click="leftClick(4)"
            >
              振动传递路径示教
            </div>
            <div
              class="PrincipleTeachLeftBox"
              :class="{ leftBgStyle: leftActive == 5 }"
              @click="leftClick(5)"
            >
              减隔振效果示教
            </div>
            <div
              v-if="menuActived == 4"
              class="PrincipleTeachLeftBox"
              :class="{ leftBgStyle: leftActive == 6 }"
              @click="leftClick(6)"
            >
              减隔振效果示教
            </div>
          </div>
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script>
import zh_CN from "ant-design-vue/lib/locale-provider/zh_CN";
import "moment/locale/zh-cn";
export default {
  name: "app",
  components: {},
  data() {
    return {
      menuActived: "1", //最左边菜单选中了哪一项
      name: this.$route.name,
      locale: zh_CN,
      collapsed: false,
      menuList: [],
      active: "ResourceManage", //默认为课程计划管理
      leftActive: null, //左边所选中的项
    };
  },
  created() {
    this.getData();
  },
  computed: {},
  methods: {
    async getData() {
      let { data } = await this.$axios.get("/sys/subject/page");
      this.menuList = data.data.list;
    },
    onMenuSelect({ key }) {
      //监听左边菜单的选中
      this.menuActived = key;
    },
    leftClick(val) {
      //左边所选中的项
      this.leftActive = val;
      let leftMenu = "";
      let centerMenu = "";
      switch (this.menuActived) {
        case "1":
          leftMenu = "I型装置";
          break;
        case "2":
          leftMenu = "II型装置";
          break;
        case "3":
          leftMenu = "III型装置";
          break;
        case "4":
          leftMenu = "IV型装置";
          break;
      }
      switch (this.leftActive) {
        case 1:
          centerMenu = "装置结构组成示教";
          break;
        case 2:
          centerMenu = "智能控制过程示教";
          break;
        case 3:
          centerMenu = "振动激励源特性示教";
          break;
        case 4:
          centerMenu = "振动传递路径示教";
          break;
        case 5:
          centerMenu = "减隔振效果示教";
          break;
        case 6:
          centerMenu = "减隔振效果示教";
          break;
      }
      let url =
        overallSituation.Equipment +
        "?" +
        "token=" +
        localStorage.getItem("token") +
        "&leftMenu=" +
        leftMenu +
        "&centerMenu=" +
        centerMenu +
        "&moduleActive=" +
        "原理示教";
      window.open(url);
    },
    handleMenuClick(e) {
      if (e.key === "item_0") {
        //点击了退出
        let data = {
          token: localStorage.getItem("token"),
        };
        this.$axios.post("/api/user/logout", data).then((res) => {
          if (res.message == "成功") {
            this.$axios.post("/sys/systemLog", {
              actionLog: "登录",
            });
            this.$message.success("退出成功");
            localStorage.removeItem("token"); // 删除存储在 'token' 键下的数据
            location.href = "login.html";
          }
        });
      }
    },
  },
};
</script>
<style lang="scss">
.ResourceManag {
  height: 100vh;
}
</style>
<style lang="scss">
.PrincipleTeachContainer {
  margin-top: 30px;
  margin-left: 30px;
  width: 1500px;
  height: 850px;
  background: url("~@/assets/img/subjectBg.png") no-repeat 100%;
  display: flex;
  justify-content: space-around;
  .PrincipleTeachLeft {
    width: 70%;
    height: 700px;
    overflow-y: auto;
    .PrincipleTeachLeftBox {
      width: 190px;
      height: 170px;
      text-align: center;
      float: left;
      margin-left: 110px;
      margin-top: 120px;
      padding-top: 110px;
      font-size: 20px;
      color: white;
      font-weight: 600;
      cursor: pointer;
      background: url("~@/assets/img/Pri_a.png") no-repeat 100%;
    }
    .leftBgStyle {
      background: url("~@/assets/img/Pri_b.png") no-repeat 100%;
    }
  }
  .PrincipleTeachRight {
    width: 350px;
    height: 522px;
    position: relative;
    margin-top: 120px;
    background: url("~@/assets/img/modelClick.png") no-repeat 100%;
    .PrincipleTeachRightBox {
      width: 180px;
      height: 58px;
      position: absolute;
      left: 26%;
      text-align: center;
      line-height: 58px;
      font-size: 16px;
      color: white;
      font-weight: 600;
      cursor: pointer;
      background: url("~@/assets/img/modelButton_a.png") no-repeat 100%;
    }
    .rightBgStyle {
      background: url("~@/assets/img/modelButton_b.png") no-repeat 100%;
      color: #d6ff1f;
    }
  }
}
</style>
  